"use client"

import {
   Toast,
   ToastClose,
   ToastDescription,
   ToastProvider,
   ToastTitle,
   ToastViewport,
} from "~/registry/default/ui/toast"
import { useToast } from "~/registry/default/ui/use-toast"

export function Toaster() {
   const { toasts } = useToast()

   return (
      <ToastProvider>
         {toasts.map(({ id, title, description, action, ...props }) => {
            return (
               <Toast key={id} {...props}>
                  <div className="grid gap-1">
                     {title && <ToastTitle>{title}</ToastTitle>}
                     {description && (
                        <ToastDescription>{description}</ToastDescription>
                     )}
                  </div>
                  {action}
                  <ToastClose />
               </Toast>
            )
         })}
         <ToastViewport />
      </ToastProvider>
   )
}
